<template>
  <div>
    <Row>
      <Row class="funcContainer">
        <Col span="8">
          <Input
            search
            clearable
            enter-button
            size="large"
            placeholder="搜索服务"
            v-model="name"
            @on-search="queryService"
            @on-clear="clearSearch"
          />
        </Col>
        <Col span="4" offset="12">
          <div class="btnContainer">
            <Button
              type="primary"
              class="btn"
              @click="serviceAuth"
              :disabled="buttonState"
              size="large"
              ><Icon type="md-add" />&nbsp;服务授权</Button
            >
          </div>
        </Col>
      </Row>
      <Col span="24" class="tableContainer">
        <Loading v-if="isLoading"></Loading>
        <Table
          :columns="columns"
          :data="serviceList"
          border
          @on-selection-change="selectionChange"
          v-if="!isLoading"
        >
          <template slot-scope="{ row }" slot="action">
            <img
              src="../assets/fwsq/查看详情2.png"
              @click="viewService(row)"
              style="cursor: pointer; margin-right: 10px"
            />
            <img
              src="../assets/fwsq/编辑.png"
              style="cursor: pointer"
              @click="changeAccess(row)"
            />
            <!-- <img
              :src="
                row.access.isAccessible
                  ? require('../assets/fwsq/公开.png')
                  : require('../assets/fwsq/加密.png')
              "
              style="cursor: pointer;" @click="changeAccess(row)"
            /> -->
          </template>
        </Table>
        <div class="pageContainer" v-if="!isLoading">
          <Page
            :total="serviceListTotal"
            show-elevator
            show-total
            @on-change="pageParams"
            :disabled="isPageDisabled"
          ></Page>
        </div>
      </Col>
    </Row>
    <div
      class="filter"
      v-show="isShowAuth || showServiceMsg || isShowAuth_single"
    ></div>
    <saItem
      v-if="isShowAuth"
      :serviceMsg="selections"
      @showSA="getShowAuth"
    ></saItem>
    <UpdateService
      v-if="showServiceMsg"
      :title="'查看服务'"
      :hasButton="false"
      :serviceForm="serviceForm"
      @operState="changeState"
    ></UpdateService>
    <saItem
      v-if="isShowAuth_single"
      :serviceMsg="selection"
      @showSA="getShowAuth_single"
    ></saItem>
  </div>
</template>
<script>
import saItem from "../components/serviceAuth/serviceAuthItem";
import UpdateService from "../components/serviceAuth/updateService";
import Loading from "../components/Other/Loading";
export default {
  name: "ServiceManage",
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "标题",
          key: "title",
        },
        {
          title: "服务类型",
          key: "type",
        },
        {
          title: "注册日期",
          key: "publishDate",
        },
        {
          title: "操作",
          slot: "action",
          width: 160,
          align: "center",
        },
      ],
      page: "",
      size: 10,
      serviceList: [],
      serviceListTotal: 0,
      name: "",
      isPageDisabled: false,
      selections: [],
      selection: [],
      isShowAuth: false,
      isShowAuth_single: false,
      buttonState: true,
      showServiceMsg: false,
      serviceForm: {},
      isLoading: true,
    };
  },
  components: {
    saItem,
    UpdateService,
    Loading,
  },
  watch: {
    selections: {
      handler() {
        if (this.selections.length > 0) {
          this.buttonState = false;
        } else {
          this.buttonState = true;
        }
      },
      deep: true,
    },
  },
  methods: {
    changeState(data) {
      this.showServiceMsg = false;
    },
    getShowAuth_single() {
      this.isShowAuth_single = false;
      this.queryServiceList();
      this.selections = [];
    },
    changeAccess(row) {
      this.selection = [
        {
          id: row.id,
          isAccess: row.access.isAccessible,
          userAccess: row.access.accessUsers,
        },
      ];
      this.isShowAuth_single = true;
    },
    queryServiceList() {
      this.isLoading = true;
      this.axios
        .get("/service", {
          page: this.page,
          size: this.size,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.serviceList = res.data.data;
            this.serviceListTotal = res.data.total;
            this.isLoading = false;
          } else {
            this.$Message.info("当前没有服务！");
            this.isLoading = false;
          }
        });
    },
    queryService() {
      this.axios
        .get("/service", {
          params: {
            name: this.name,
            page: 1,
            size: 10,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.serviceList = res.data.data;
            this.serviceListTotal = res.data.total;
            this.isPageDisabled = true;
          } else {
            this.$Message.info("未找到指定服务！");
          }
        });
    },
    clearSearch() {
      this.queryServiceList();
      this.isPageDisabled = false;
    },
    pageParams(page) {
      this.page = page;
      this.queryServiceList();
    },
    viewService(row) {
      this.axios.get("/service/" + row.id).then((res) => {
        if (res.data.code === 200) {
          this.serviceForm = res.data.data;
          this.showServiceMsg = true;
        }
      });
    },
    selectionChange(selections) {
      this.selections = selections.map((selection) => {
        return {
          id: selection.id,
          isAccess: selection.access.isAccessible,
          userAccess: selection.access.accessUsers,
        };
      });
    },
    serviceAuth() {
      this.isShowAuth = true;
    },
    getShowAuth(data) {
      this.isShowAuth = data;
      this.queryServiceList();
      this.selections = [];
    },
  },
  mounted() {
    this.queryServiceList();
  },
};
</script>
<style scoped>
.funcContainer {
  width: 100%;
}
.btnContainer {
  display: flex;
  justify-content: space-around;
}
.btn {
  margin: 0 1rem;
  background: rgb(0, 63, 84) !important;
  color: rgb(255, 255, 255, 0.8);
}
.tableContainer {
  margin-top: 30px;
}
.pageContainer {
  text-align: center;
  margin-top: 50px;
}
#modalContainer {
  padding: 30px;
}
.checkboxItem {
  display: block;
  text-align: left;
}
.checkboxContainer {
  padding: 30px;
}
.checkboxTitle {
  line-height: 55px;
  font-size: larger;
  font-weight: bold;
}
.filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 1);
  opacity: 0.3566;
  z-index: 998;
}
</style>
